<template>
  <div>
    <el-dialog v-model="visable" title="修改密码" width="400" draggable align-center :close-on-click-modal="false">
      
      <el-form
          ref="userRef"
          :model="form"
          :rules="formRules"
          label-width="auto"
          size="small"
          style="width: 80%;margin: auto;"
        >
          <el-form-item label="旧密码:" prop="oldUserPwd">
            <el-input v-model="form.oldUserPwd" placeholder="请输入用户旧密码" clearable show-password/>
          </el-form-item>
          <el-form-item label="新密码:" prop="userPwd">
            <el-input v-model="form.userPwd" placeholder="请输入用户新密码" clearable show-password/>
          </el-form-item>
          <el-form-item label="确认密码:" prop="confirmUserPwd">
            <el-input v-model="form.confirmUserPwd" placeholder="请输入用户确认密码" clearable show-password/>
          </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="visable = false">取消</el-button>
          <el-button type="primary" @click="save">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import {updateUserPwd} from '@/api/system/user'
import { removeToken } from "@/utils/localStorage";
export default {
  data() {
    return {
      visable:false,
      // 已登录的用户旧密码
      oldUserPwd:undefined,
      form:{
        userId:undefined,
        // 旧密码
        oldUserPwd:undefined,
        // 新密码
        userPwd:undefined,
        // 确认密码
        confirmUserPwd:undefined,
      },
      formRules:{
        oldUserPwd: [
          { required: true, validator:this.validateOldUserPwd, trigger: ['blur', 'change'] },
        ],
        userPwd: [
          { required: true, min:6, message: '新密码长度不能小于6位', trigger: ['blur', 'change'] },
        ],
        confirmUserPwd: [
          { required: true, min:6, validator:this.validateconfirmUserPwd, trigger: ['blur', 'change'] },
        ],
      }
    };
  },
  methods: {
    openModal(row){
      console.log('用户信息',this.$store.state.userInfo)
      this.visable = true
      // 清空数据
      this.oldUserPwd = undefined
      // 清空表单
      if (this.$refs.userRef) {
        this.$nextTick(() => {
          this.$refs.userRef.resetFields()
        })
      }
      // 赋值
      this.form.userId = row.userId
      this.oldUserPwd = row.userPwd
    },
    validateOldUserPwd(rule, value, callback){
      if(value) {
        if (value != this.oldUserPwd) {
          callback(new Error('旧密码不正确'))
        } else {
          callback()
        }
      } else {
         callback(new Error('旧密码不能为空'))
      }
    },
    validateconfirmUserPwd(rule, value, callback){
      if(value) {
        if (value.length < 6) {
          callback(new Error('密码长度不能小于6位'))
        } else if (value != this.form.userPwd) {
          callback(new Error('2次输入的密码不一样'))
        } else {
          callback()
        }
      } else {
         callback(new Error('确认密码不能为空'))
      }
    },
    // 保存提交
    save(){
      this.$refs.userRef.validate((valid)=>{
        if (valid) {
          updateUserPwd(this.form).then(res=>{
            if (res.code == 1) {
              let that = this
              this.$message.success("密码修改成功,请重新登录")
              window.setTimeout(()=>{
                // 删除本地token
                removeToken()
                // 删除缓存token
                that.$store.commit('removeToken')
                // 清空tab
                that.$store.commit('cleanTab')
                that.$router.push({ path: this.globalObject.loginPath })
              },1000)
            } else {
               this.$message.error("密码修改失败,请联系管理员")
            }
          })
        }
      })
    },
  },
};
</script>
